<template>
  <div class="get">
    <div v-if ="loading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="subjectList" class="content">
      <dl v-for="subject in subjectList">
        <dt>
          <a :href="'/teachers/' + subject.no+'/'+ subject.name">
            {{ subject.name }}
          </a>
          <img v-if="subject.is_hot" :src="hotIcon">
        </dt>
        <dd>{{ subject.intro }}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'subjects',
    data() {
      return {
        loading:false,
        error:null,
        subjectList: null,
        hotIcon: require('../assets/hot-icon-small.png'),
      };
    },
    created() {
      this.showSubject();
    },
    methods: {
      async showSubject() {
        try{
          await axios.get('subjects/')
          // this.axios.get('subjects/')
                .then(response => {
                  console.log("subjectList:", response.data)
                  this.subjectList = response.data.results;
                })
                .catch(error => {
                  console.error('There was an error!', error);
                });
        }catch (err) {
          this.error = err.toString()
        }finally {
          this.loading = false
        }

      }
    }
  };

</script>

<style>
  /* 组件的样式 */
</style>
